<template>
  <div>
    <div class="home item">
      <DialogBox :toastInfo="toastInfo" />
    </div>
    <div class="component flex-cc item">
      <div class="selectText">请选择选项：</div>
      <SelectComponent @changeSelect="changeSelectCallbackFunction" :optionArr="optionArr" :selectContent="selectContent" :selectWidth="selectWidth" />
    </div>
    <div class="ajax item">
      <div>{{today}}</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import DialogBox from '@/components/DialogBox.vue'
import SelectComponent from '@/components/select/selectComponent.vue'
import http from '@/util/http'
import Api from '@/util/api'

export default {
  name: 'home',
  components: {
    DialogBox,
    SelectComponent
  },
  data() {
    return {
      msg: '我被点击了',
      today:'2018/11/28',

      // DialogBox传递的值
      toastInfo:{
        msg: '点击我触发弹框',
        toastTitle: '您点击了我',
        confirmInfo: '您点击了确认',
        cancelInfo: '你点击了取消'
      },

      //SelectComponent传递的值
      optionArr: [             // 所有的option
        {text: '选项一'}, 
        {text: '选项二'},
        {text: '选项三'},
        {text: '选项四'},
      ],
      selectContent: {         // select的值
        value: '这是值', 
        text: '请选择选项'
      },
      selectWidth: 500,        // select标签的值
    }
  },
  created() {
    http.post(Api.recommendToday, {}).then(res => {
			this.today = res.data;
		}).catch(err=>{
			console.log(err);
		});
  },
  methods: {
    changeSelectCallbackFunction: function(data) {
      console.log("您选中的option文本为：" + data)
    }
  }
}
</script>
<style scoped>
.home >>> h1 {
  width: 7.5rem;
}
.item{
  margin-bottom: .3rem;
}
.component .selectText{
  margin-right: .3rem;
}
</style>


